<template>
  <div class="usageRecord-box">
    <Hander></Hander>

    <div class="content-box">
      <div class="box-bg">
        <UserHand />
        <div class="bg-content">
          <div class="content-title">
            <div class="title-icon"></div>
            使用记录
          </div>
          <div class="content-time" @click="show_calendar = true">
            <div v-if="currentDate.length > 0">
              {{ currentDate[0] + "年" + currentDate[1] + "月" }}
            </div>

            <img class="icon" src="@/assets/sx.svg" alt="" />
          </div>
        </div>

        <div class="bg-list">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getendbackfindAll"
          >
            <div class="list-item" v-for="(item, index) in syList" :key="index">
              <div class="list-dd">
                <div class="list-title">订单号：{{ item.businessOrderNo }}</div>
                <van-tag v-if="item.orderStatus == 'CREATED'" type="primary">
                  已创建
                </van-tag>
                <van-tag v-if="item.orderStatus == 'PAID'" type="success">
                  已支付
                </van-tag>
                <van-tag v-if="item.orderStatus == 'CANCELLED'" type="danger">
                  已退款
                </van-tag>
              </div>
              <div class="list-title-two">
                金额：{{ item.fee ? item.fee : "--" }}元
              </div>
              <div class="list-title-two">
                使用时间：{{ item.usageRecordcreatedAt ?  moment(item.usageRecordcreatedAt).format('YYYY-MM-DD HH:mm:ss') : "--" }}
              </div>
              <div class="list-title-two">
                网点名称：{{ item.name ? item.name : "--" }}
              </div>
              <div class="list-title-two">
                网点地址：{{ item.location ? item.location : "--" }}
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>

    <van-popup
      v-model:show="show_calendar"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-date-picker
        v-model="currentDate"
        @confirm="confirmDate"
        @cancel="show_calendar = false"
        title="请选择"
        :filter="filter"
        :min-date="minDate"
        :max-date="maxDate"
        :columns-type="columnsType"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import Hander from "@/components/hander.vue";
import UserHand from "@/components/userHand.vue";

import moment from 'moment';


import { endbackfindAll } from "@/api/index.js";

const show_calendar = ref(false);
let y = new Date().getFullYear();
let m =
  new Date().getMonth() + 1 >= 10
    ? new Date().getMonth() + 1
    : "0" + (new Date().getMonth() + 1);
let r = new Date().getDate();

// const currentDate = ref([y, m, r]);
const currentDate = ref([y, m]);
const minDate = ref(new Date("2024", "01"));
const maxDate = ref(new Date("2034", "01"));
// const columnsType = ["year", "month", "day"];
const columnsType = ["year", "month"];

const confirmDate = (e) => {
  show_calendar.value = false;

  fromData.value.page = 1;

  fromData.value.borrowTimeStart =
    currentDate.value[0] +
    "-" +
    currentDate.value[1] +
    "-" +
    "01" +
    "T00:00:00";
  syList.value = [];
  getendbackfindAll();
};

import { useCounterStore } from "@/stores/counter";
const counterStore = useCounterStore();
// 读取 userInfo（响应式）
const userInfo = computed(() => counterStore.userInfo);

//获取使用记录类别
const finished = ref(false);
let loading = ref(false);
let total = ref(0);
let syList = ref([]);
let fromData = ref({
  borrowTimeStart:
    currentDate.value[0] +
    "-" +
    currentDate.value[1] +
    "-" +
    "01" +
    "T00:00:00",
  page: 1,
  size: 10,
  userAccount: userInfo.value.account,
});
const getendbackfindAll = async () => {
  try {
    loading.value = true;
    let res = await endbackfindAll(fromData.value);

    // syList.value = [...syList.value, ...res.data.content];
    syList.value = [
      ...syList.value,
      ...res.data.content.map(({ usageRecord, device }) => ({
        // 优先使用usageRecord的createdAt字段
        usageRecordcreatedAt: usageRecord.createdAt,
        // 合并其他字段，device中的字段会覆盖usageRecord中同名的非createdAt字段
        ...usageRecord,
        ...device,
      })),
    ];
    total.value = res.data.totalElements;

    // 判断是否还有更多数据
    finished.value = syList.value.length >= total.value;
  } catch (error) {
    finished.value = true; // 出错时也结束加载
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getendbackfindAll();
});
</script>
<style scoped lang="scss">
.usageRecord-box {
  width: 100%;
  height: 100vh;
  background: #47bc91;

  .content-box {
    width: 100%;
    height: calc(100vh - 120px);
    box-sizing: border-box;
    padding: 0 12px;
    position: relative;
    z-index: 1;

    .box-bg {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      height: 100%;

      box-sizing: border-box;
      padding: 0 12px;

      .bg-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .content-title {
          display: flex;
          align-items: center;

          font-weight: bold;
          font-size: 16px;
          color: #151515;

          .title-icon {
            width: 4px;
            height: 21px;
            background: #47bc91;
            border-radius: 2px;
            margin-right: 4px;
          }
        }

        .content-time {
          font-weight: bold;
          font-size: 12px;
          color: #151515;
          display: flex;
          align-items: center;

          .icon {
            width: 12px;
            height: 12px;
            margin-left: 5px;
          }
        }
      }

      .bg-list {
        width: 100%;
        height: calc(100% - 225px);
        margin-top: 5px;
        overflow-x: hidden;
        .list-item {
          width: 100%;
          box-sizing: border-box;
          padding: 20px 0;
          border-bottom: 1px solid #d8d8d8;
          .list-dd {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title-tag {
              font-weight: 400;
              font-size: 11px;
              color: #47ba7f;
              box-sizing: border-box;
              padding: 3px 9px;
              background-color: #dffff4;
            }
            .list-title {
              font-weight: 600;
              font-size: 16px;
              color: #0e100f;
            }
          }

          .list-title-two {
            margin-top: 12px;
            font-weight: 400;
            font-size: 14px;
            color: #191919;
          }
        }
      }
    }
  }
}
</style>
